<!--    Day17后台管理登录         -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>NongFu-Mall后台管理 - Log in</title>
    <!-- 告诉浏览器响应屏幕宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 网页图标    -->
    <link rel="shortcut icon" th:href="@{/admin/dist/img/favicon.ico}"/>
    <!-- 字体 -->
    <link rel="stylesheet" th:href="@{/admin/dist/css/font-awesome.min.css}">
    <!-- 图标 -->
    <link rel="stylesheet" th:href="@{/admin/dist/css/ionicons.min.css}">
    <!-- 主题风格 -->
    <link rel="stylesheet" th:href="@{/admin/dist/css/adminlte.min.css}">
    <style>
        canvas {
            display: block;
            vertical-align: bottom;
        }
        #particles {
            background-color: #3d9970;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

    </style>
</head>
<body class="hold-transition login-page">
<div id="particles">
</div>
<div class="login-box" >
<!--    <div class="login-logo" style="color: #1baeae;">-->
<!--        <img th:src="@{/mall/image/logo5.png}" style="    height: 58px;float: left;margin-left: 10px;">-->
<!--        <h1>管理系统登陆</h1>-->
<!--    </div>-->
    <!-- /.login-logo -->
    <div class="card">
        <div class="card-body login-card-body">
            <!-- img+h1 图片和标题   -->
            <p style="margin-right: 1px"><strong style="color: #0b2e13">农扶后台登录</strong></p>
            <p class="login-box-msg"><img th:src="@{/admin/dist/img/logo5.png}" style="height: 58px"><br><br>
                <strong style="color: #2aa198">提示:请进行管理员登录 , Let's Go !</strong></p>
            <!--  form表单 post请求一般是处理请求，get请求一般是跳转          -->
            <form th:action="@{/admin/login}" method="post">
<!--                &lt;!&ndash;  判断登录页面session会话中errorMsg是否为空              &ndash;&gt;-->
<!--                <div th:if="${not #strings.isEmpty(session.errorMsg)}" class="form-group">-->
<!--                    <div class="alert alert-danger" th:text="${session.errorMsg}"></div>-->
<!--                </div>-->
                <div class="form-group has-feedback">
                    <span class="fa fa-user form-control-feedback"></span>
                    <!--  账号输入                  -->
                    <input type="text" id="userName" name="userName" class="form-control" placeholder="请输入账号"
                           required="true">
                </div>
                <div class="form-group has-feedback">
                    <span class="fa fa-lock form-control-feedback"></span>
                    <!--   密码输入                 -->
                    <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码"
                           required="true">
                </div>
                <div class="row">
                    <div class="col-6">
                        <!--  验证码输入                      -->
                        <input type="text" class="form-control" name="verifyCode" placeholder="请输入验证码" required="true">
                    </div>
                    <div class="col-6">
                        <!--  img 验证码图片显示  onclick点击跳转                    -->
                        <img alt="单击图片刷新！" class="pointer" th:src="@{/common/kaptcha}"
                             onclick="this.src='/common/kaptcha?d='+new Date()*1">
                    </div>
                </div>
                <div class="form-group has-feedback"></div>
                <div class="row">
                    <div class="col-8">
                        <!--  判断登录页面session会话中errorMsg是否为空              -->
                        <div th:if="${not #strings.isEmpty(session.errorMsg)}" class="form-group">
                            <div class="alert alert-danger" style="height: 50px;width: 150px" th:text="${session.errorMsg}"></div>
                        </div>
                    </div>
                    <div class="col-4">
                        <button type="submit" class="btn btn-dark btn-block btn-flat">登录
                        </button>
                    </div>
                </div>
            </form>

        </div>
        <!-- /.login-card-body -->
    </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/admin/dist/js/plugins/particles.js}"></script>
<script th:src="@{/admin/dist/js/plugins/login-bg-particles.js}"></script>
</body>
</html>
